<template>
    <div class="app-container" style="overflow-y: auto;">
        <el-form
            :model="queryParams"
            ref="queryForm"
            width="100%"
            label-width="80px"
        >
            <el-row>
                <el-col :span="6" v-if="false">
                    <el-form-item label="部门" prop="parentId">
                        <treeselect
                            v-model="queryParams.deptId"
                            :options="deptOptions"
                            :show-count="true"
                            @select="serviceClazzChenge"
                            placeholder="请输入服务名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="云服务商" prop="parentId">
                        <el-select v-model="queryParams.supplier" placeholder="请选择云服务商">
                            <el-option
                            v-for="item in logicListALL"
                            :key="item.cloudSupplier"
                            :label="item.cloudSupplierName"
                            :value="item.cloudSupplier">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="月份" prop="month">
                        <el-date-picker
                            v-model="queryParams.month"
                            type="month"
                            format="yyyy 年 MM 月"
                            value-format="yyyy-MM"
                            placeholder="选择月">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item style="margin-left: -30px">
                        <el-button
                            type="cyan"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table
            :data="datalist"
            ref="refTable"
            style="width: 100%;"
        >
            <el-table-column
                label="部门名称"
                align="center"
                prop="deptName"
            />
            <el-table-column
                label="系统数量"
                align="center"
                prop="cloudUpNum"
            />
            <el-table-column
                label="云服务器数量"
                align="center"
                prop="ecsNum"
            />
            <el-table-column
                label="云服务器"
                align="center"
            >   
                <el-table-column
                    label="cpu"
                    align="center"
                >
                    <el-table-column
                        align="center"
                        label="用量(核·月)"
                        prop="vcpu_used"
                        width="100"
                    />
                    <!-- <el-table-column
                        align="center"
                        label="单价"
                        prop="fbscc_wjcc2_price"
                    /> -->
                    <el-table-column
                        align="center"
                        label="总价"
                        prop="vcpu_total"
                    />
                </el-table-column>
                <el-table-column
                    label="内存"
                    align="center"
                >
                    <el-table-column
                        align="center"
                        label="用量(GB·月)"
                        prop="memory_used"
                        width="100"
                    />
                    <!-- <el-table-column
                        align="center"
                        label="单价"
                        prop="fbscc_wjcc2_price"
                    /> -->
                    <el-table-column
                        align="center"
                        label="总价"
                        prop="memory_total"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column
                label="存储"
                align="center"
                prop="cloudUpName"
            >
                <el-table-column
                    align="center"
                    label="分布式存储、文件存储"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="center"
                        label="用量(TB·月)"
                        prop="fbscc_wjcc2_used"
                        width="100"
                    />
                    <!-- <el-table-column
                        align="center"
                        label="单价"
                        prop="fbscc_wjcc2_price"
                    /> -->
                    <el-table-column
                        align="center"
                        label="总价"
                        prop="fbscc_wjcc2_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="FC存储(通用块存储)"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="center"
                        label="用量(TB·月)"
                        prop="FCcc(tykcc)2_used"
                        width="100"
                    />
                    <!-- <el-table-column
                        align="center"
                        label="单价"
                        prop="FCcc(tykcc)2_price"
                    /> -->
                    <el-table-column
                        align="center"
                        label="总价"
                        prop="FCcc(tykcc)2_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="FC存储(SSD块存储)"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="center"
                        label="用量(TB·月)"
                        prop="FCcc_ssd_used"
                        width="100"
                    />
                    <!-- <el-table-column
                        align="center"
                        label="单价"
                        prop="FCcc_ssd_price"
                    /> -->
                    <el-table-column
                        align="center"
                        label="总价"
                        prop="FCcc_ssd_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="视频云存储"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="center"
                        label="用量(TB·月)"
                        prop="spycc2_used"
                        width="100"
                    />
                    <!-- <el-table-column
                        align="center"
                        label="单价"
                        prop="spycc2_price"
                    /> -->
                    <el-table-column
                        align="center"
                        label="总价"
                        prop="spycc2_total"
                    />
                </el-table-column>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getDataList"
        />
    </div>
</template>
<script>
import { logicList } from "@/api/basic/services";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptBillingList } from "@/api/reportForm/charging";
export default {
    components: { Treeselect },
    name: "DepartmentBilling",
    data(){
        return{
            // 部门列表
            deptOptions: [],
            // 查询字段
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type : true,
                month : "",
                supplier: '',
            },
            datalist : [],
            total : 0,
            logicListALL : []
        }
    },
    created(){
        if(new Date().getMonth() + 1 > 9){
            this.queryParams.month = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
        }else{
            this.queryParams.month = new Date().getFullYear() + '-0' + (new Date().getMonth() + 1)
        }
        treeselect().then((res) => {
            this.deptOptions = res.data;
        })
        logicList().then((res)=>{
            this.logicListALL = res.rows
            this.queryParams.supplier = res.rows[0].cloudSupplier
            this.getDataList()
        })
    },
    methods:{
        /** 转换部门数据结构 */
        serviceClazzChenge(row) {
            this.queryParams.deptId = row.id
        },
        getDataList(){
            deptBillingList(this.queryParams).then(res=>{
                this.datalist = res.rows
                this.total = res.total
            })
        },
        // 查询
        handleQuery() {
            this.getDataList()
        },
        // 重置
        resetQuery() {
            // 查询字段
            this.queryParams =  {
                pageNum: 1,
                pageSize: 10,
                type : true,
                month : "",
                supplier: '',
            }
        },
    }
}
</script>

<style lang="less" scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .app-container{
        .row-expand-cover td:last-child .el-icon-arrow-right{visibility: hidden;}
    }
    /deep/ .el-table .row-expand-cover .cell .el-table__expand-icon {
        display: none;
    }
</style>